<script lang="ts" setup>
	import { ref } from 'vue'

	// 隐私协议
	const agreement = ref(false)

	const popupAgreement = ref(false)

	// 登录方式
	const loginType = ref([{
		icon: '../../static/icon/qq.png',
		bg: '#1890FF',
		event: () => handleLoginType('qq登录')
	}, {
		icon: '../../static/icon/user.png',
		bg: '#008080',
		event: () => handleLoginType('账号登录')
	}])

	// 其他登录方式
	const showOther = ref(false)

	const handleLogin = () => {
		uni.navigateTo({
			url: '/pages/loginItem/loginItem'
		})
	}

	const handleLoginType = (title : string) => {
		uni.navigateTo({
			url: `/pages/loginItem/loginItem?title=${title}`
		})
	}

	const handleOtherLogin = () => {
		showOther.value = !showOther.value
	}
</script>

<template>
	<view class="w-[100vw] h-[100vh] flex justify-center items-center flex-col">
		<!-- title -->
		<view class="title text-[teal]  font-bold">
			<text class="block text-center text-[32px]">ATOMNOTION</text>
			<text class="block text-center mt-[40rpx] text-[16px]"> 记录你的美好生活</text>
		</view>
		<!-- 圆 -->
		<nut-transition :show="true" name="zoom" :duration="1500">
			<view class="yuan w-[400rpx] h-[400rpx] overflow-hidden mt-[60rpx]">
				<image src="/static/icon/login_yuan.png" class="w-full h-full" mode=""></image>
			</view>
		</nut-transition>

		<!--文本框 -->
		<!-- <view class="last_login my-[40rpx] text-[18px] font-bold">
			2188817393@qq.com
		</view> -->
		<!-- login btn -->
		<nut-transition :show="true" name="fade-left" :duration="1000">
			<view class="w-full flex justify-center items-center mt-[60rpx]">
				<nut-animate type="flicker" :loop="true">
					<nut-button type="primary" size="small" class='w-[200rpx] h-[60rpx]' @click="handleLogin">
						立即登录
					</nut-button>
				</nut-animate>

			</view>
		</nut-transition>
		<!-- Other login -->
		<nut-transition :show="true" name="fade-left" :duration="1500">
			<view class="other_login my-[20rpx] text-[#5C5C66]" @click="handleOtherLogin">
				其他登录方式
			</view>
		</nut-transition>

		<!-- agreement -->
		<nut-transition :show="true" name="fade-left" :duration="1800">
			<view class="agreement text-[#5C5C66]">
				<nut-checkbox v-model="agreement" icon-size="10">
					我已阅读并同意 <a class="text-[blue]">《用户协议》</a>
				</nut-checkbox>
			</view>
		</nut-transition>

		<u-popup :show="showOther" v-if="showOther" :round="10" mode="bottom" @close="showOther = false"
			@open="showOther = true">
			<u-divider class="my-[20rpx]" text="选择登录方式"></u-divider>
			<view class="h-[100rpx] w-full justify-around flex  items-center">
				<view v-for="(i,idx) in loginType" :key="idx" @click="i.event" :style="{border:`1rpx solid ${i.bg}`}"
					class="other w-[60rpx] h-[60rpx] flex justify-center items-center  rounded-full overflow-hidden ">
					<image :src="i.icon" class="w-[40rpx] h-[40rpx]" mode=""></image>
				</view>


			</view>
			<nut-transition :show="true" name="fade-left" :duration="1800">
				<view class="agreement h-[40rpx]	my-[20rpx]  w-full flex justify-center">
					<nut-checkbox class="text-[teal]" v-model="popupAgreement" icon-size="10">
						我已阅读并同意 <a class="text-[blue]">《用户协议》</a>
					</nut-checkbox>
				</view>
			</nut-transition>
		</u-popup>

	</view>
</template>